<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form ref="queryForm" :inline="true" :model="queryData">
				<el-row>
					<el-col :span="24" class="flex-warp-container">
						<el-form-item
							:label="`${$t('common.belong_merchant')}:`"
							class="flex-row-container"
							label-width="77px"
						>
							<merchant-select
								v-model="queryData.merchantId"
								:merchantInfo.sync="merchantObj"
							></merchant-select>
						</el-form-item>
						<el-form-item class="flex-row-container">
							<el-input
								v-model="queryData.inputValue"
								class="input-with-select"
								:placeholder="$t('common.please_enter')"
								clearable
								size="medium"
								@input="forceUpdate"
							>
								<el-select
									slot="prepend"
									v-model="queryData.inputType"
									:placeholder="$t('common.please_choose')"
									style="width: 110px"
									@change="handleInputType"
								>
									<el-option
										:label="$t('funds.user_name')"
										:value="1"
									></el-option>
									<el-option
										:label="$t('funds.proxy_name')"
										:value="2"
									></el-option>
								</el-select>
							</el-input>
						</el-form-item>
						<el-form-item
							:label="$t('agent.agent_level') + ':'"
							prop="proxyLevel"
							class="flex-row-container"
							label-width="77px"
						>
							<el-select
								v-model="queryData.proxyLevel"
								:placeholder="$t('common.select_all')"
								clearable
								:disabled="queryData.inputType === 1"
							>
								<el-option
									v-for="item in agentLevel"
									:key="item.id"
									:label="item.id"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item
							:label="`${$t(
								'funds.proxy_member_funds_record.payable_loan_amount'
							)}:`"
							class="flex-row-container"
							label-width="110px"
						>
							<el-input
								v-model="queryData.loanRepaymentMin"
								size="medium"
								clearable
								:placeholder="$t('common.minimum')"
								style="width: 130px"
								maxLength="15"
								v-input="{ name: 'onlyTwoNum' }"
								name="loanRepaymentMin"
								@blur="
									handleAmount(
										queryData,
										1,
										'loanRepaymentMin',
										'loanRepaymentMax',
										$t(
											'funds.proxy_member_funds_record.payable_loan_amount_tip1'
										)
									)
								"
							></el-input>
							-
							<el-input
								v-model="queryData.loanRepaymentMax"
								size="medium"
								clearable
								:placeholder="$t('common.maximum')"
								style="width: 130px"
								maxLength="15"
								v-input="{ name: 'onlyTwoNum' }"
								name="loanRepaymentMax"
								@blur="
									handleAmount(
										queryData,
										2,
										'loanRepaymentMin',
										'loanRepaymentMax',
										$t(
											'funds.proxy_member_funds_record.payable_loan_amount_tip2'
										)
									)
								"
							></el-input>
						</el-form-item>
						<el-form-item
							:label="`${$t(
								'funds.proxy_member_funds_record.withdrawable_amount'
							)}:`"
							class="flex-row-container"
							label-width="91px"
						>
							<el-input
								v-model="queryData.withdrawableMin"
								size="medium"
								clearable
								:placeholder="$t('common.minimum')"
								style="width: 130px"
								maxLength="15"
								v-input="{ name: 'onlyTwoNum' }"
								name="withdrawableMin"
								@blur="
									handleAmount(
										queryData,
										1,
										'withdrawableMin',
										'withdrawableMax',
										$t(
											'funds.proxy_member_funds_record.withdrawable_amount_tip1'
										)
									)
								"
							></el-input>
							-
							<el-input
								v-model="queryData.withdrawableMax"
								size="medium"
								clearable
								:placeholder="$t('common.maximum')"
								style="width: 130px"
								maxLength="15"
								v-input="{ name: 'onlyTwoNum' }"
								name="withdrawableMax"
								@blur="
									handleAmount(
										queryData,
										2,
										'withdrawableMin',
										'withdrawableMax',
										$t(
											'funds.proxy_member_funds_record.withdrawable_amount_tip2'
										)
									)
								"
							></el-input>
						</el-form-item>
						<el-form-item>
							<el-button
								type="primary"
								icon="el-icon-search"
								size="medium"
								:disabled="loading"
								@click="search"
							>
								{{ $t('common.search') }}
							</el-button>
							<el-button
								icon="el-icon-refresh-left"
								:disabled="loading"
								size="medium"
								@click="reset"
							>
								{{ $t('common.reset') }}
							</el-button>
							<el-button
								v-if="hasPermission('90060029')"
								icon="el-icon-download"
								type="warning"
								:disabled="loading"
								size="medium"
								:loading="exportBtnLoading"
								@click="handleExportExcel"
							>
								{{ $t('common.export') }}
							</el-button>
							<el-button
								type="success"
								icon="el-icon-sort"
								:disabled="loading"
								size="medium"
								@click="openColSettings"
							>
								{{ $t('common.row_set') }}
							</el-button>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-show="queryData.inputType === 2">
					<el-col :span="24" class="flex-warp-container">
						<LabelCheckboxMultiple
							ref="checkboxDom"
							:dataList="dataList"
							@getSelectData="getSelectData($event)"
							:showCheckComponent="true"
						></LabelCheckboxMultiple>
					</el-col>
				</el-row>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="tables"
				v-loading="loading"
				border
				size="mini"
				show-summary
				:data="tableData"
				style="width: 100%"
				class="small-size-table"
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
				element-loading-spinner="el-icon-loading"
				highlight-current-row
				:summary-method="(val) => handleRow(val, subSummary)"
			>
				<el-table-column
					prop="applyTime"
					align="center"
					:label="$t('funds.fund_audit.bill_date')"
					min-width="300"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.applyTime || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('funds.fund_audit.snapshot_time')]"
					prop="createTime"
					align="center"
					:label="$t('funds.fund_audit.snapshot_time')"
					min-width="170"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createTime || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[$t('funds.fund_audit.account_number')]
					"
					prop="acctName"
					align="center"
					min-width="180"
					:label="$t('funds.fund_audit.account_number')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.acctName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[$t('funds.fund_audit.proxy_level_name')]
					"
					prop="acctType"
					align="center"
					:label="$t('funds.fund_audit.proxy_level_name')"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span v-if="scope.row.acctType === 99">
							{{
								typeFilter(scope.row.acctType, 'proxyLevelList')
							}}
						</span>
						<span v-else>
							{{
								(scope.row.acctType === 0
									? '0'
									: scope.row.acctType) || '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.belong_merchant')]"
					prop="topMerchantName"
					align="center"
					min-width="180"
					:label="$t('common.belong_merchant')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.topMerchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.top_agent')]"
					prop="parentProxyName"
					align="center"
					min-width="190"
					:label="$t('common.top_agent')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.fund_audit.belong_general_agent')
						]
					"
					prop="topProxyName"
					align="center"
					min-width="190"
					:label="$t('funds.fund_audit.belong_general_agent')"
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('funds.wind_control_level')]"
					prop="windControlName"
					align="center"
					:label="$t('funds.wind_control_level')"
					min-width="130"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.windControlName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.proxy_member_funds_record.account_status')
						]
					"
					prop="acctStatus"
					align="center"
					:label="
						$t('funds.proxy_member_funds_record.account_status')
					"
					min-width="130"
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.acctStatus === 1"
							class="disableRgba"
						>
							{{ $t('common.login_lock_status') }}
						</span>
						<span
							v-if="scope.row.acctStatus === 0"
							class="normalRgba"
						>
							{{ $t('common.account_status_normal') }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.settlement_bill_management.team_assets')
						]
					"
					prop="teamFunds"
					align="center"
					:label="$t('funds.settlement_bill_management.team_assets')"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.teamFunds)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.teamFunds
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.team_payable_loan'
							)
						]
					"
					prop="teamReturnLoan"
					align="center"
					min-width="200"
					:label="
						$t('funds.settlement_bill_management.team_payable_loan')
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.teamReturnLoan
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.team_withdrawable_limit'
							)
						]
					"
					prop="teamWithdrawable"
					align="center"
					:label="
						$t(
							'funds.settlement_bill_management.team_withdrawable_limit'
						)
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.teamWithdrawable
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.texas_club_service_charge_team_rebate'
							)
						]
					"
					prop="netAssets"
					align="center"
					:label="
						$t(
							'funds.settlement_bill_management.texas_club_service_charge_team_rebate'
						)
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(scope.row.clubRebateAmount)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.clubRebateAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.texas_insurance_team_share'
							)
						]
					"
					prop="netAssets"
					align="center"
					:label="
						$t(
							'funds.settlement_bill_management.texas_insurance_team_share'
						)
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(
									scope.row.insuranceRebateAmount
								)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.insuranceRebateAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.texas_insurance_added'
							)
						]
					"
					prop="netAssets"
					align="center"
					:label="
						$t(
							'funds.settlement_bill_management.texas_insurance_added'
						)
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(
									scope.row.valueAddedTotalAmount
								)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.valueAddedTotalAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.general_rebate'
							)
						]
					"
					prop="netAssets"
					align="center"
					:label="
						$t('funds.settlement_bill_management.general_rebate')
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(
									scope.row.multipleRebateAmount
								)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.multipleRebateAmount
								)
							}}
						</span>
					</template>
				</el-table-column>

				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.settlement_bill_management.rebate_income')
						]
					"
					align="center"
					:label="
						$t('funds.settlement_bill_management.rebate_income')
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.teamIncomeAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.general_divide'
							)
						]
					"
					prop="netAssets"
					align="center"
					:label="
						$t('funds.settlement_bill_management.general_divide')
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(
									scope.row.multipleRebateAmountRate
								)
							"
						>
							{{
								scope.row.multipleRebateAmountRate === 0 ||
								!scope.row.multipleRebateAmountRate
									? '-'
									: handleNumber(
											scope.row.currency,
											scope.row.multipleRebateAmountRate
									  )
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.settlement_bill_management.general_share')
						]
					"
					prop="netAssets"
					align="center"
					:label="
						$t('funds.settlement_bill_management.general_share')
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(scope.row.teamRebateSharing)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.teamRebateSharing
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.bill_net_assets'
							)
						]
					"
					prop="netAssets"
					align="center"
					:label="
						$t('funds.settlement_bill_management.bill_net_assets')
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.netAssets)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.netAssets
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.payable_bill_loan'
							)
						]
					"
					prop="returnLoan"
					align="center"
					:label="
						$t('funds.settlement_bill_management.payable_bill_loan')
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.returnLoan
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.withdrawable_limit'
							)
						]
					"
					prop="withdrawable"
					align="center"
					:label="
						$t(
							'funds.settlement_bill_management.withdrawable_limit'
						)
					"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.withdrawable
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('report.center_wallet_balance')]"
					key="walletBalance"
					prop="walletBalance"
					align="center"
					min-width="200"
					:label="$t('report.center_wallet_balance')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.walletBalance
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.credit_wallet_balance'
							)
						]
					"
					key="creditBalance"
					prop="creditBalance"
					align="center"
					min-width="200"
					:label="
						$t(
							'funds.settlement_bill_management.credit_wallet_balance'
						)
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.creditBalance
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.settlement_bill_management.should_repay')
						]
					"
					align="center"
					min-width="200"
					:label="$t('funds.settlement_bill_management.should_repay')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.shouldRepay
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.outside_amount'
							)
						]
					"
					align="center"
					min-width="200"
					:label="
						$t('funds.settlement_bill_management.outside_amount')
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.outsideAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.total_credit_amount'
							)
						]
					"
					align="center"
					min-width="200"
					:label="
						$t(
							'funds.settlement_bill_management.total_credit_amount'
						)
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.totalCreditAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('funds.fund_audit.credit_limit')]"
					key="creditQuota"
					prop="creditQuota"
					align="center"
					min-width="200"
					:label="$t('funds.fund_audit.credit_limit')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.creditQuota
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.person_rebate_amount'
							)
						]
					"
					align="center"
					min-width="200"
					:label="
						$t(
							'funds.settlement_bill_management.person_rebate_amount'
						)
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(scope.row.personRebateAmount)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.personRebateAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.person_rebate_income'
							)
						]
					"
					align="center"
					min-width="200"
					:label="
						$t(
							'funds.settlement_bill_management.person_rebate_income'
						)
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:style="
								handleNumberColor(
									scope.row.agencyPersonalIncome
								)
							"
						>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.agencyPersonalIncome
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.settlement_bill_management.bet_amount')
						]
					"
					align="center"
					min-width="200"
					:label="$t('funds.settlement_bill_management.bet_amount')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.validBetAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.settlement_bill_management.bet_count')
						]
					"
					align="center"
					min-width="200"
					:label="$t('funds.settlement_bill_management.bet_count')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ handleNumber('', scope.row.betCount, 0) }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.settlement_bill_management.net_amount')
						]
					"
					align="center"
					min-width="200"
					:label="$t('funds.settlement_bill_management.net_amount')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.netAmount)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.netAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.member_rebate_amount'
							)
						]
					"
					align="center"
					min-width="200"
					:label="
						$t(
							'funds.settlement_bill_management.member_rebate_amount'
						)
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.memberRebateAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.member_deposit_amount'
							)
						]
					"
					align="center"
					min-width="200"
					:label="
						$t(
							'funds.settlement_bill_management.member_deposit_amount'
						)
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.memberDepositAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.member_withdraw_amount'
							)
						]
					"
					align="center"
					min-width="200"
					:label="
						$t(
							'funds.settlement_bill_management.member_withdraw_amount'
						)
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.memberWithdrawAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('funds.settlement_bill_management.member_loan')
						]
					"
					align="center"
					min-width="200"
					:label="$t('funds.settlement_bill_management.member_loan')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.memberLoan
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t(
								'funds.settlement_bill_management.member_repayment'
							)
						]
					"
					align="center"
					min-width="200"
					:label="
						$t('funds.settlement_bill_management.member_repayment')
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.memberRepayment
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[$t('funds.fund_audit.generation_time')]
					"
					align="center"
					min-width="200"
					:label="$t('funds.fund_audit.generation_time')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createTime || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					min-width="120"
					:label="$t('common.actions')"
				>
					<template slot-scope="scope">
						<span
							v-if="hasPermission('90270043')"
							class="text-link"
							@click="openBillDetail(scope.row)"
						>
							{{ $t('common.check_detail') }}
						</span>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<SettlementBillDetail
			v-if="showDetail"
			:visible.sync="showDetail"
			:detailData="detailData"
			@closeBillDetail="closeBillDetail"
		></SettlementBillDetail>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
import MainContent from '@/components/MainContent/index.vue'
import SettlementBillDetail from '@/components/Funds/SettlementBillDetail'
export default {
  name: routerNames.noOutBillList,
  components: { MainContent, SettlementBillDetail },
  mixins: [list, summaryList],
  data() {
    return {
      tableHeight: 480,
      otherDependenComponents: [],
      showDetail: false,
      detailData: {},
      queryData: {
        inputType: 2,
        inputValue: undefined,
        proxyLevel: undefined,
        loanRepaymentMin: undefined,
        loanRepaymentMax: undefined,
        withdrawableMin: undefined,
        withdrawableMax: undefined
      },
      tableData: [],
      agentLevel: [],
      proxyList: ['1'],
      subSummary: {},
      exportBtnLoading: false,
      merchantObj: '',
      colSettings: {
        visible: false,
        dialogColumnData: {}
      },
      activityListField: {
        [this.$t('funds.fund_audit.snapshot_time')]: true,
        [this.$t('funds.fund_audit.account_number')]: true,
        [this.$t('funds.fund_audit.proxy_level_name')]: true,
        [this.$t('common.belong_merchant')]: true,
        [this.$t('common.top_agent')]: true,
        [this.$t('funds.fund_audit.belong_general_agent')]: true,
        [this.$t('funds.wind_control_level')]: true,
        [this.$t(
          'funds.proxy_member_funds_record.account_status'
        )]: true,
        [this.$t('funds.settlement_bill_management.team_assets')]: true,
        [this.$t(
          'funds.settlement_bill_management.team_payable_loan'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.team_withdrawable_limit'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.rebate_income'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.bill_net_assets'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.payable_bill_loan'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.withdrawable_limit'
        )]: true,
        [this.$t('report.center_wallet_balance')]: true,
        [this.$t(
          'funds.settlement_bill_management.credit_wallet_balance'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.should_repay'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.outside_amount'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.total_credit_amount'
        )]: true,
        [this.$t('funds.fund_audit.credit_limit')]: true,
        [this.$t(
          'funds.settlement_bill_management.person_rebate_income'
        )]: true,
        [this.$t('funds.settlement_bill_management.bet_amount')]: true,
        [this.$t('funds.settlement_bill_management.bet_count')]: true,
        [this.$t('funds.settlement_bill_management.net_amount')]: true,
        [this.$t(
          'funds.settlement_bill_management.member_rebate_amount'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.member_deposit_amount'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.member_withdraw_amount'
        )]: true,
        [this.$t('funds.settlement_bill_management.member_loan')]: true,
        [this.$t(
          'funds.settlement_bill_management.member_repayment'
        )]: true,
        [this.$t('funds.fund_audit.generation_time')]: true,
        [this.$t(
          'funds.settlement_bill_management.texas_insurance_team_share'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.texas_insurance_added'
        )]: true,

        [this.$t(
          'funds.settlement_bill_management.texas_club_service_charge_team_rebate'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.general_rebate'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.general_divide'
        )]: true,
        [this.$t(
          'funds.settlement_bill_management.general_share'
        )]: true
      },
      dataList: [
        {
          label: '代理',
          isCheck: false,
          showColon: false,
          checkedData: ['1'],
          dataChildList: [
            {
              label: '1',
              text: '自身'
            },
            {
              label: '2',
              text: '直属下级代理'
            },
            {
              label: '3',
              text: '全部下级代理'
            },
            {
              label: '4',
              text: '直属会员'
            },
            {
              label: '5',
              text: '全部下级会员'
            }
          ]
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.initIndexDB('noOutBillList', this.activityListField)
    this.getProxyLevelNameList()
  },
  mounted() { },
  methods: {
    handleInputType(val) {
      this.$refs.checkboxDom.clearAllSelect()
      this.dataList[0].checkedData = ['1']
      this.proxyList = ['1']
      this.proxyLevelDisabled = val === 1
      this.queryData.proxyLevel = undefined
    },
    openBillDetail(row) {
      this.detailData = row
      this.showDetail = true
    },
    closeBillDetail() {
      this.showDetail = false
      this.detailData = {}
    },
    forceUpdate(value) {
      this.$forceUpdate()
      this.queryData.inputValue = this.queryData.inputValue.replace(
        /[^A-Za-z0-9]/g,
        ''
      )
    },
    getSelectData(data) {
      this.proxyList = data
    },
    getProxyLevelNameList() {
      this.agentLevel = []
      this.$api.getProxylevelnameList().then((res) => {
        if (res?.code === 200) {
          this.agentLevel = Array.isArray(res.data) ? res.data : []
        } else {
          this.agentLevel = []
        }
      })
    },
    loadData() {
      this.loading = true
      const params = {
        ...this.queryData,
        ...this.getParams()
      }
      if (params.inputType === 1) {
        params.memberName = params.inputValue || undefined
        params.proxyName = undefined
      } else if (params.inputType === 2) {
        params.proxyName = params.inputValue || undefined
        params.memberName = undefined
      }
      delete params.inputValue
      delete params.inputType
      params.proxyList = this.proxyList
      this.pageCurrency = this.merchantObj?.currency || ''
      this.$api
        .getNoOutBillList(params)
        .then((res) => {
          const { record, totalRecord, summary } = res.data || {}
          this.tableData = record || []
          this.total = totalRecord || 0
          this.subSummary = summary || {}
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    reset() {
      this.pageNum = 1
      this.queryData = {
        inputType: 2,
        proxyLevel: undefined,
        minPayableLoanAmount: undefined,
        maxPayableLoanAmount: undefined,
        minWithdrawableAmount: undefined,
        maxWithdrawableAmount: undefined
      }
      this.merchantObj = ''
      this.$refs.checkboxDom.clearAllSelect()
      this.proxyList = []
      this.dataList[0].checkedData = ['1']
      this.proxyList = ['1']
      this.loadData()
    },
    handleExportExcel() {
      const params = {
        ...this.queryData
      }
      if (params.inputType === 1) {
        params.memberName = params.inputValue || undefined
        params.proxyName = undefined
      } else if (params.inputType === 2) {
        params.proxyName = params.inputValue || undefined
        params.memberName = undefined
      }
      delete params.inputValue
      delete params.inputType
      params.proxyList = this.proxyList
      this.exportBtnLoading = true
      this.exportExcelPublic({
        api: 'getNoOutBillListExport',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    },
    // 提交列设置数据
    handleOrderList() {
      this.colSettings.visible = false
      this.updateIndexDB()
    },
    // 打开列设置弹框
    openColSettings() {
      this.getIndexDB(this.activityListField)
      this.colSettings.visible = true
    },
    clickDel() {
      const activityListColumn = {}
      Object.keys(this.activityListField).forEach((item) => {
        activityListColumn[item] = true
      })
      this.dialogColumnData = Object.assign({}, activityListColumn)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
